<style type="text/css">
    @media print {
        .btn-print-page {
            display: none;
        }
    }
    @media print {
        .order-detail {
            display: none;
        }
    }

    @media (max-width: 767px) {
        .fixed .content-wrapper,
        .fixed .right-side {
            padding-top: 50px;
        }
    }
    #main {
        height: 100%;
        background: #f1f4f6;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .skin-red-light .treeview-menu>li.active>a {
        color: #e74c3c;
    }
    [v-cloak] {
        display: none !important;
    }
    .text-cut {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* 修改默认样式 */
    .bootstrap-table .table:not(.table-condensed),
    .bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
    .bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
    .bootstrap-table .table:not(.table-condensed)>tfoot>tr>td,
    .bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
    .bootstrap-table .table:not(.table-condensed)>thead>tr>td {
        padding: 10px 8px;
    }
</style>

<div id="main" role="main">
    <div class="tab-content tab-addtabs">
        <div id="content">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <!--startprint-->
                    <div class="content">


                        <a class="btn btn-info btn-xs pull-right btn-print-page" href="javascript:" onclick="printpage()"><i class="fa fa-print">打印</i></a>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <input type="hidden" id="order_id" value="{$data.id|htmlentities}">
                                    <input type="hidden" id="store_id" value="{$data.store_id|htmlentities}">

                                    <div class="panel-heading">商品信息</div>
                                    <div class="panel-body">
                                        <p>
                                            <span>订单号：</span><small>{$data.order_no|htmlentities}</small>
                                            {if condition="$data.dc_type eq 1"}
                                            <span style="margin-left: 30px;">买家：</span><small>{$data.user_name|htmlentities}</small>
                                            {/if}
                                        </p>
                                        {if condition="$data.type ==1"}
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th class="text-center">
                                                    <div class="th-inner">门店</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">商品ID</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">主图</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">商品名称</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">购买规格</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">数量</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">单价</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">总价</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">备注</div>
                                                </th>

                                            </tr>
                                            </thead>
                                            <tbody>
                                            {volist name="detail" id="vo"}
                                            <tr>
                                                <td class="text-center">{$vo.store.title|htmlentities}</td>
                                                <td class="text-center">{$vo.goods_id|htmlentities}</td>
                                                <td class="text-center"><a href="javascript:"><img class="img-sm img-center" src="{$vo.goods.image|htmlentities}"></a></td>
                                                <td class="text-center"><strong>{$vo.goods_name|htmlentities}</strong></td>
                                                <td class="text-center">{$vo.item_name|htmlentities}</td>
                                                <td class="text-center">{$vo.goods_count|htmlentities}</td>
                                                <td class="text-center">{$vo.goods_price|htmlentities}</td>
                                                <td class="text-center">{$vo.goods_prices|htmlentities}</td>
                                                <td class="text-center">{$vo.numbers|htmlentities}</td>
                                            </tr>
                                            {/volist}

                                            </tbody>
                                            <tfoot>
                                            <tr>

                                                <th colspan="13" style="text-align: right;">
                                                    {if condition="$data.coupon_id > 0"}
                                                    <span class="ordertext">优惠金额：<samp class="text-red">￥{$data.used_amount|htmlentities}</samp></span>
                                                    {/if}
                                                    <span class="ordertext">实际支付：<samp class="text-red">￥{$data.order_amount_total|htmlentities}</samp></span>
                                                </th>
                                            </tr>
                                            </tfoot>
                                        </table>
                                        {/if}
                                        <div style="color: #333;">
                                            <p style="margin-bottom: 15px;">订单状态：
                                                <span class="label label-primary">{$data.status_text|htmlentities}</span>
                                            </p>
                                            <p style="margin-bottom: 15px;">支付类型：
                                                <span class="label label-primary">{if condition="$data.type eq 1"}支付订单{else /}充值订单{/if}</span>
                                            </p>
                                            {if condition="$data.status != 1 && $data.status != 5"}
                                            <p style="margin-bottom: 15px;">支付方式：
                                                <span class="label label-info">{$data.pay_type|htmlentities}</span>
                                            </p>
                                            {/if}
                                            {if condition="$data.order_type ==3"}
                                            <p style="margin-bottom: 15px;">就餐方式：
                                                <span class="label label-info">{if condition="$data.p_type eq 1"}先付后餐{else /}先餐后付{/if}</span>
                                            </p>
                                            {/if}
                                            <p style="margin-bottom: 15px;">订单类型：
                                                <span class="label label-info">{if condition="$data.order_type eq 1"}自提{elseif condition="$data.order_type eq 2" /}外卖{elseif condition="$data.order_type eq 3" /}堂食{elseif condition="$data.order_type eq 4" /}预约{/if}</span>
                                            </p>
                                            <p style="margin-bottom: 15px;">点餐类型：
                                                <span class="label label-info">{if condition="$data.dc_type eq 1"}用户点餐{else /}门店点餐{/if}</span>
                                            </p>
                                            {if condition="$data.order_type ==1 || $data.order_type ==2"}
                                            <p style="margin-bottom: 15px;">商家接单状态：
                                                <span class="label label-info">{if condition="$data.business_status eq 0"}无{elseif condition="$data.business_status eq 1" /}待接单{else /}已接单{/if}</span>
                                            </p>
                                            {/if}
                                            {if condition="$data.order_type == 3"}
                                            <p style="margin-bottom: 15px;">桌号：
                                                <span >{$data.seat_info|htmlentities}</span>
                                                <!-- <button type="button" class="btn btn-success" id="js_change" data-d-id="{$data.id|htmlentities}" data-d-type="all" role="button" >调整桌号</button> -->
                                            </p>
                                            {/if}

                                            <div>
                                                {if $data['status'] != 3 && $data['status'] != 9}
                                                <button type="button" class="btn btn-success btn-status-click" data-order='{"status":3}'>设为已完成</button>
                                                {/if}
                                                {if ($data['status'] != 3 && $data['status'] != 5 && $data['status'] != 9)}
                                                <button type="button" class="btn btn-success btn-status-click" data-order='{"status":5}'>设为取消</button>
                                                {/if}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                            {if condition="$data.order_type eq 2"}
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">收货地址</div>
                                    <div class="panel-body">
                                        <table class="table table-striped">
                                            <tbody>
                                            <tr>
                                                <td>收货人</td>
                                                <td>{$data.address_json.title|default=''|htmlentities}</td>
                                            </tr>
                                            <tr>
                                                <td>联系电话</td>
                                                <td>{$data.address_json.mobile|default=''|htmlentities}</td>
                                            </tr>
                                            <tr>
                                                <td>收货地址</td>
                                                <td>{$data.address_json.address|default=''|htmlentities}{$data.address_json.remark|default=''|htmlentities}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            {/if}

                            {if condition="$data.order_type eq 1"}
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">自取信息</div>
                                    <div class="panel-body">
                                        <table class="table table-striped">
                                            <tbody>
                                            <tr>
                                                <td>预约时间</td>
                                                <td>{$data.subscribe_time|date='Y-m-d H:i:s',###}</td>
                                            </tr>
                                            <tr>
                                                <td>预留电话</td>
                                                <td>{$data.subscribe_tel|htmlentities}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            {/if}



                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">付款信息</div>
                                    <div class="panel-body">
                                        <table class="table table-striped">
                                            <tbody>
                                            {if condition="$data.coupon_id > 0"}
                                            <tr>
                                                <td>优惠券标题</td>
                                                <td>{$data.coupon_title|htmlentities}</td>
                                            </tr>
                                            <tr>
                                                <td>优惠券抵扣金额</td>
                                                <td>{$data.used_amount|htmlentities}</td>
                                            </tr>
                                            {/if}
                                            <tr>
                                                <td>交易号</td>
                                                <td>{$data.out_trade_no|htmlentities}</td>
                                            </tr>
                                            <tr>
                                                <td>订单备注</td>
                                                <td>{$data.remark|htmlentities}</td>
                                            </tr>
                                            <tr>
                                                <td>付款时间</td>
                                                <td>{if condition="$data.pay_time != null"}{$data.pay_time|datetime|htmlentities}{/if}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="c-id" value="{$data.id|htmlentities}">

                        </div>

                        <div class="hide layer-footer">
                            <label class="control-label col-xs-12 col-sm-2"></label>
                            <div class="col-xs-12 col-sm-8">
                                <button type="reset" class="btn btn-primary btn-embossed btn-close" onclick="Layer.closeAll();">关闭</button>
                            </div>
                        </div>


                        <style type="text/css">
                            .content {
                                padding: 25px 20px;
                            }

                            /* 订单详情 */
                            .order-detail .order-block {
                                height: 31px;
                                line-height: 31px;
                                background: #e8edf0;
                                border-radius: 13px;
                                font-size: 14px;
                                text-align: center;
                                position: relative;
                                margin-bottom: 50px;
                            }

                            .order-detail .order-block:before,
                            .order-detail .order-block:after {
                                content: "";
                                position: absolute;
                                z-index: 2;
                                left: 0;
                                top: 0;
                                bottom: 0;
                                border-radius: 13px;
                                background: #18bc9c;
                            }

                            .order-detail .order-block:after {
                                background: #4dc7af;
                                z-index: 1;
                            }

                            .order-detail .order-block.progress-1:before {
                                width: 0;
                            }

                            .order-detail .order-block.progress-1:after {
                                width: 16.6%;
                            }

                            .order-detail .order-block.progress-2:before {
                                width: 16.6%;
                            }

                            .order-detail .order-block.progress-2:after {
                                width: 33.2%;
                            }

                            .order-detail .order-block.progress-3:before {
                                width: 33.2%;
                            }

                            .order-detail .order-block.progress-3:after {
                                width: 49.8%;
                            }

                            .order-detail .order-block.progress-4:before {
                                width: 49.8%;
                            }

                            .order-detail .order-block.progress-4:after {
                                width: 66.4%;
                            }

                            .order-detail .order-block.progress-5:before {
                                width: 66.4%;
                            }

                            .order-detail .order-block.progress-5:after {
                                width: 83%;
                            }
                            .order-detail .order-block.progress-6:before {
                                width: 83%;
                            }
                            .order-detail .order-block.progress-6:after {
                                width: 100%;
                            }

                            .order-detail .order-block.progress-5 li:nth-child(6) {
                                color: #fff;
                            }

                            .order-detail .order-block li {
                                width: 16.6%;
                                float: left;
                                list-style-type: none;
                                border-radius: 13px;
                                position: relative;
                                z-index: 3;
                            }

                            .order-detail .order-block .tip {
                                font-size: 12px;
                                padding-top: 10px;
                                color: #717171;
                            }

                            .order-detail .order-block.progress-1 li:nth-child(1),
                            .order-detail .order-block.progress-2 li:nth-child(1),
                            .order-detail .order-block.progress-3 li:nth-child(1),
                            .order-detail .order-block.progress-4 li:nth-child(1),
                            .order-detail .order-block.progress-6 li:nth-child(1),
                            .order-detail .order-block.progress-5 li:nth-child(1) {
                                color: #fff;
                            }

                            .order-detail .order-block.progress-2 li:nth-child(2),
                            .order-detail .order-block.progress-3 li:nth-child(2),
                            .order-detail .order-block.progress-4 li:nth-child(2),
                            .order-detail .order-block.progress-6 li:nth-child(2),
                            .order-detail .order-block.progress-5 li:nth-child(2) {
                                color: #fff;
                            }

                            .order-detail .order-block.progress-3 li:nth-child(3),
                            .order-detail .order-block.progress-4 li:nth-child(3),
                            .order-detail .order-block.progress-6 li:nth-child(3),
                            .order-detail .order-block.progress-5 li:nth-child(3) {
                                color: #fff;
                            }

                            .order-detail .order-block.progress-4 li:nth-child(4),
                            .order-detail .order-block.progress-6 li:nth-child(4),
                            .order-detail .order-block.progress-5 li:nth-child(4) {
                                color: #fff;
                            }

                            .order-detail .order-block.progress-5 li:nth-child(5),
                            .order-detail .order-block.progress-6 li:nth-child(5) {
                                color: #fff;
                            }

                            .order-detail .order-block.progress-6 li:nth-child(6) {
                                color: #fff;
                            }

                            .order-detail .td__order-price {
                                width: 200px;
                                display: inline-block;
                            }

                            .order-head {
                                width: 100%;
                                padding: 12px 20px;
                                margin-top: 60px;
                                /* margin-bottom: 20px; */
                                /* border-bottom: 1px solid #eef1f5; */
                            }

                            .order-head:not(:first-child) {
                                margin-top: 0;
                            }

                            .order-head .title {
                                position: relative;
                                font-size: 1.5rem;
                                color: #333;
                            }

                            .order-head .title::before {
                                content: '';
                                position: absolute;
                                width: 4px;
                                height: 14px;
                                background: #18bc9c;
                                top: 4px;
                                left: -12px;
                            }

                            .table-responsive .table>tbody>tr>td {
                                text-align: center;
                                vertical-align: middle;
                                color: #676767;
                            }

                            .ordertext {
                                margin: 0 30px;
                            }

                            .table-bordered {
                                border: 1px solid #e8edf0;
                            }

                            .table-bordered>thead>tr>th,
                            .table-bordered>tbody>tr>th,
                            .table-bordered>tfoot>tr>th,
                            .table-bordered>thead>tr>td,
                            .table-bordered>tbody>tr>td,
                            .table-bordered>tfoot>tr>td {
                                border: 1px solid #e8edf0;
                            }

                            .table thead tr {
                                background: #f8f9fb;
                            }

                            .order_price span {
                                width: 70px;
                                display: inline-block;
                                text-align: right;
                            }
                        </style>
                    </div>
                    <!--endprint-->
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    function printpage() {
        //将class="print-content"的元素 style="display: none;" 改为 style="display: block;"

        let oldStr = window.document.body.innerHTML; // 获取body的内容
        let start = "<!--startprint-->"; // 开始打印标识, 17个字符
        let end = "<!--endprint-->"; // 结束打印标识
        let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容
        newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容
        window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给body
        window.print(); // 调用浏览器的打印功能打印指定区域
        window.document.body.innerHTML = oldStr; // body替换为原来的内容
    }
</script>


